<template>
  <basic-container>
    <div class="order">
      <div class="totalOrder">
        <p>总订单</p>
        <p style="color: #409eff;font-size: 30px;margin-bottom: 10px;">88</p>
      </div>
      <div class="listTotal">
        <div v-for="(item, index) in list" :key="index" class="listItem">
          <p>{{ item.name }}</p>
          <p style="color: #409eff;font-size: 24px;">{{ item.value }}</p>
        </div>
      </div>
    </div>
    <div class="totalDiv">
      <div class="turnover">
        <div class="totalOrder">
          <p>总订单</p>
          <p style="color: #409eff;font-size: 30px;margin-bottom: 10px;">88</p>
        </div>
        <div class="listTotal">
          <div v-for="(item, index) in list1" :key="index" class="listItem">
            <p>{{ item.name }}</p>
            <p style="color: #409eff;font-size: 24px;">{{ item.value }}</p>
          </div>
        </div>
      </div>
      <div class="totalUsers">
        <div class="totalOrder">
          <p>总订单</p>
          <p style="color: #409eff;font-size: 30px;margin-bottom: 10px;">88</p>
        </div>
        <div class="listTotal">
          <div v-for="(item, index) in list1" :key="index" class="listItem">
            <p>{{ item.name }}</p>
            <p style="color: #409eff;font-size: 24px;">{{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="wel">
      <basic-block :width="width" :height="height" icon="el-icon-platform-eleme" text="商家列表" time="1"
        background="/img/bg3.jpg" color="#d56259"></basic-block>
      <basic-block :width="width" :height="height" icon="el-icon-eleme" text="商家入驻" time="2" background="/img/bg2.jpg"
        color="#419ce7"></basic-block>
      <basic-block :width="width" :height="height" icon="el-icon-delete-solid" text="商圈列表" time="3"
        color="#56b69b"></basic-block>
      <basic-block :width="width" :height="height" icon="el-icon-delete" text="分类列表" time="4"
        color="#d44858"></basic-block>
      <basic-block :width="width" :height="height" icon="el-icon-s-tools" text="日志记录" time="5"
        color="#3a1f7e"></basic-block>
    </div>
  </basic-container>
</template>

<script>
export default {
  data() {
    return {
      width: 200,
      height: 120,
      list: [
        { name: '待付款订单', value: 20 },
        { name: '待发货订单', value: 10 },
        { name: '待核销订单', value: 30 },
        { name: '待自提订单', value: 15 },
        { name: '待售后订单', value: 25 },
        { name: '今日订单数', value: 40 },
        { name: '昨日订单数', value: 35 },
        { name: '上月订单数', value: 20 },
        { name: '分销待提现数量', value: 10 },
        { name: '商家待提现数量', value: 20 }
      ],
      list1: [
        { name: '待付款订单', value: 20 },
        { name: '待发货订单', value: 10 },
        { name: '待核销订单', value: 30 },
      ]
    }
  }
}
</script>

<style lang="scss">
.totalDiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .turnover{
    width: 45%;
  }
  .totalUsers{
    width: 45%;
  }
}

.listTotal {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .listItem {
    text-align: center;
  }
}

.order {
  margin-bottom: 20px;
}
.totalOrder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-bottom: 1px solid #ccc;

  p {
    margin: 0;
  }
}

.wel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 1100px;
  margin: 0 auto;
}
</style>
